<!-- 
  计算属性的完整写法
    使用案例来进行说明：全选/反选
-->
<script setup>
  import {ref, computed} from "vue"
  // 任务列表
  const taskList = ref([
    {id: 1, name: "跑步", isFinite: false},
    {id: 2, name: "看书", isFinite: false},
    {id: 3, name: "吃饭", isFinite: false},
    {id: 4, name: "睡觉", isFinite: false},
    {id: 5, name: "学习", isFinite: false},
    {id: 6, name: "追剧", isFinite: false},
  ])
  // 全选
  const all = computed({
    // 赋值
    get() {
      return taskList.value.every((item) => {
        return item.isFinite
      })
    },
    // 修改
    set(val) {
      taskList.value.forEach((item) => {
        item.isFinite = val
      })
    }
  })
  // 反选
  const onInvert = () => {
    taskList.value.forEach((item) => {
        item.isFinite = !item.isFinite
    })
  }
</script>

<template>
  <div class="panel">
    <ul>
      <li>
        <span>
          <input id="all" type="checkbox" v-model="all">
          <label for="all">全选</label>
        </span>
        <button @click="onInvert">反选</button>
      </li>
      <li v-for="item in taskList" :key="item.id">
        <input :id="item.id" type="checkbox" v-model="item.isFinite">
        <label :for="item.id">{{ item.name }}</label>
      </li>
    </ul>
  </div>
</template>

<style scoped>
  .panel {
    width: 380px;
    background-color: #8cdd82;
    padding: 3px 10px;
  }
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  li {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px #068b42 solid;
    padding: 2px 0;
    margin: 2px;
  }
</style>